<template>

  <div class="statistics" style="display:flex">
    <div class="app-container" style="flex:1" v-for="(item,index) in statisticsData" :key="index">
      <el-row>
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div style="display: flex;align-items: center;">
            <div>
              <i class="el-icon-s-order" style="font-size:40px;color:#52c1f5"></i>
            </div>
            <div>{{ item.name }}</div>

          </div>
          <div>{{item.date}}</div>
        </div>
      </el-row>
      <el-row style="text-align:center" :span="4">
        <div class="number" style="font-size:20px">{{item.data.toLocaleString()}}</div>
        <div class="percentage" style="font-size: 14px;color:#999">+45% 同比增长</div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      statisticsData: [
        {
          name: "订单",
          data: 343,
          date: "本月"
        },
        {
          name: "订单",
          data: 34242,
          date: "本月"
        },
        {
          name: "订单",
          data: 24224,
          date: "本月"
        },
        {
          name: "订单",
          data: 3423,
          date: "本周"
        },
      ]
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
</style>


